<template>
  <section class="shipment-sender-info">
    <p :class="classFlag">{{ consigneeName }}<br />{{ contact }}</p>
  </section>
</template>

<script>
export default {
  name: "WaybillConsigneeSenderInfo",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  computed: {
    consigneeName () {
      return `${this.row?.consigneeName || '--'}`
    },
    contact () {
      const { toContactName, toContactMobile } = this.row
      return `${toContactName || '--'} ${toContactMobile || ''}`
    },
  },
};
</script>
<style scoped>
.shipment-sender-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.red {
  color: var(--prev-color-text-red);
}
</style>
